<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:820px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=lP9BUGG19Ij8GrqzyYIf7j0BteUZN3fk"></script>
    <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <title>体检机构地址定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #c0c0c0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    // function G(id) {
    //     return document.getElementById(id);
    // }
    //
    // var  map = new BMap.Map("allmap");
    // var point = new BMap.Point(116.349936,40.066258);
    // map.centerAndZoom(point, 6);
    // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //
    // var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    //     {"input" : "suggestId"
    //         ,"location" : map
    //     });
    //
    // axios.get("/address/getAllAddress.do").then((res)=>{
    //     var data_info= res.data.data
    //
    //     var opts = {
    //         width : 250,     // 信息窗口宽度
    //         height: 80,     // 信息窗口高度
    //         title : "信息窗口" , // 信息窗口标题
    //         enableMessage:true,//设置允许信息窗发送短息
    //         enableCloseOnClick:false,//是否开启点击地图关闭信息窗口（默认开启）
    //     };
    //
    //     for(var i=0;i<data_info.length;i++){
    //         var marker = new BMap.Marker(new BMap.Point(data_info[i].longt,data_info[i].lat));  // 创建标注
    //         console.log("经度"+data_info[i].longt)
    //         console.log("纬度"+data_info[i].lat)
    //         var content = data_info[i].name;
    //         console.log("name"+data_info[i].name)
    //         map.addOverlay(marker);               // 将标注添加到地图中
    //         addClickHandler(content,marker);
    //         map.panTo(new BMap.Point(data_info[i].longt,data_info[i].lat))
    //     }
    //
    //     function addClickHandler(content,marker){
    //         marker.addEventListener("click",function(e){
    //             openInfo11(content,e)}
    //         );
    //         var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map,content, {
    //             title:"信息" , //标题
    //             panel : "panel", //检索结果面板
    //             enableAutoPan : true, //自动平移
    //             searchTypes :[
    //                 BMAPLIB_TAB_FROM_HERE, //从这里出发
    //                 BMAPLIB_TAB_SEARCH   //周边检索
    //             ]
    //         });
    //         marker.addEventListener("click", function(e){
    //             searchInfoWindow1.open(marker);
    //         })
    //     }
    //
    //
    //
    //     function openInfo11(content,e){
    //         var p = e.target;
    //         var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    //         var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
    //         map.openInfoWindow(infoWindow,point); //开启信息窗口
    //     }
    //     function openInfo(content,lng,lat){
    //         // var p = e.target;
    //         var point = new BMap.Point(lng,lat);
    //         var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
    //         map.openInfoWindow(infoWindow,point); //开启信息窗口
    //         map.panTo(point)
    //     }
    //
    //
    //     ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    //         var str = "";
    //         var _value = e.fromitem.value;
    //         var value = "";
    //         if (e.fromitem.index > -1) {
    //             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //         }
    //         str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    //
    //         value = "";
    //         if (e.toitem.index > -1) {
    //             _value = e.toitem.value;
    //             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //         }
    //         str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    //         G("searchResultPanel").innerHTML = str;
    //     });
    //
    //     var myValue;
    //     ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    //         var _value = e.item.value;
    //         myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //         G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    //
    //         setPlace();
    //     });
    //
    //     function setPlace(){
    //         function myFun(){
    //             var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
    //             map.centerAndZoom(pp, 18);
    //             map.addOverlay(new BMap.Marker(pp));    //添加标注
    //             addClickHandler(local.getResults().getPoi(0).title,new BMap.Marker(pp))
    //         }
    //         var local = new BMap.LocalSearch(map, { //智能搜索
    //             onSearchComplete: myFun
    //         });
    //         local.search(myValue);
    //     }
    // })

    axios.get("/address/getAllAddress.do").then((res)=> {
        var map = new BMap.Map("allmap");//创建地图
        var point = new BMap.Point(104.049424,30.648713);//创建地图坐标点,一般首次创建的这个点为地图的中心坐标点
        // var marker = new BMap.Marker(point);//创建标注
        // map.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
        map.centerAndZoom(point,6);//初始化地图，设置中心坐标点和地图级数
        var dataInfo = res.data.data;

        // 函数 创建多个标注
        function markerFun (points,label,infoWindows) {
            var markers = new BMap.Marker(points);
            map.addOverlay(markers);
            markers.setLabel(label);
            markers.addEventListener("click",function (event) {
                console.log("0001");
                map.openInfoWindow(infoWindows,points);//参数：窗口、点  根据点击的点出现对应的窗口
            });
        }

        for (let i = 0; i < dataInfo.length; i++) {
            let x = parseFloat(dataInfo[i].longt).toFixed(6);
            let y = parseFloat(dataInfo[i].lat).toFixed(6);
            let points = new BMap.Point(x,y);

            var opts = {
                width:250,
                height: 100,
                title:dataInfo[i].name,
                con:dataInfo[i].addressDetails
            };
            var label = new BMap.Label(dataInfo[i].name,{
                offset:new BMap.Size(25,5)
            });
            var infoWindows = new BMap.InfoWindow(dataInfo[i].addressDetails,opts);

            markerFun(points,label,infoWindows);
        }

        map.enableScrollWheelZoom(true);//鼠标滚轮滑动




    })














    // var opts = {
    //     width : 250,     // 信息窗口宽度
    //     height: 80,     // 信息窗口高度
    //     title : "信息窗口" , // 信息窗口标题
    //     enableMessage:true,//设置允许信息窗发送短息
    //     enableCloseOnClick:false,//是否开启点击地图关闭信息窗口（默认开启）
    // };

    // for(var i=0;i<data_info.length;i++){
    //     var marker = new BMap.Marker(new BMap.Point(data_info[i].longt,data_info[i].lat));  // 创建标注
    //     console.log("经度"+data_info[i].longt)
    //     console.log("纬度"+data_info[i].lat)
    //     var content = data_info[i].name;
    //     console.log("name"+data_info[i].name)
    //     map.addOverlay(marker);               // 将标注添加到地图中
    //     //openInfo(content,data_info[i].longt,data_info[i].lat);
    //     addClickHandler(content,marker);
    //     map.panTo(new BMap.Point(data_info[i].longt,data_info[i].lat))
    // }

    // function addClickHandler(content,marker){
    //     marker.addEventListener("click",function(e){
    //         openInfo11(content,e)}
    //     );
    //     var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map,content, {
    //         title:"信息" , //标题
    //         panel : "panel", //检索结果面板
    //         enableAutoPan : true, //自动平移
    //         searchTypes :[
    //             BMAPLIB_TAB_FROM_HERE, //从这里出发
    //             BMAPLIB_TAB_SEARCH   //周边检索
    //         ]
    //     });
    //     marker.addEventListener("click", function(e){
    //         searchInfoWindow1.open(marker);
    //     })
    // }
    //
    //
    //
    // function openInfo11(content,e){
    //     var p = e.target;
    //     var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    //     var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
    //     map.openInfoWindow(infoWindow,point); //开启信息窗口
    // }
    // function openInfo(content,lng,lat){
    //     // var p = e.target;
    //     var point = new BMap.Point(lng,lat);
    //     var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
    //     map.openInfoWindow(infoWindow,point); //开启信息窗口
    //     map.panTo(point)
    // }
    //
    //
    // ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    //     var str = "";
    //     var _value = e.fromitem.value;
    //     var value = "";
    //     if (e.fromitem.index > -1) {
    //         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //     }
    //     str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    //
    //     value = "";
    //     if (e.toitem.index > -1) {
    //         _value = e.toitem.value;
    //         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //     }
    //     str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    //     G("searchResultPanel").innerHTML = str;
    // });
    //
    // var myValue;
    // ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    //     var _value = e.item.value;
    //     myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    //     G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    //
    //     setPlace();
    // });
    //
    // function setPlace(){
    //     function myFun(){
    //         var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
    //         map.centerAndZoom(pp, 18);
    //         map.addOverlay(new BMap.Marker(pp));    //添加标注
    //         addClickHandler(local.getResults().getPoi(0).title,new BMap.Marker(pp))
    //     }
    //     var local = new BMap.LocalSearch(map, { //智能搜索
    //         onSearchComplete: myFun
    //     });
    //     local.search(myValue);
    // }


</script>
